<template>
  <div class="msg-send-nav">
    <div class="button-wrapper-left">
      <img src="@/assets/msg/icon-back.svg" @click="back()" />
    </div>
    <div class="title">消息详情</div>
    <div class="button-wrapper-right">
      <img src="@/assets/msg/icon-trash.svg" @click="deleteMessage" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router'
import { showConfirmDialog, showToast } from 'vant'
import MsgServe from '@/api/msg'

const route = useRoute()
const router = useRouter()

defineOptions({
  name: 'MsgContentNav'
})

// 删除消息
const deleteMessage = () => {
  showConfirmDialog({
    title: '提示',
    message: '确定要删除这条消息吗？',
    beforeClose: (action: string) => new Promise(resolve => {
      if (action === 'confirm') {
        MsgServe.deleteMessage({ ids: route.params.id }).then(res => {
          showToast('删除消息成功')
          back()
        }).catch(error => {
          showToast('删除消息失败，请稍后再试')
          console.error('删除消息失败：', error)
        }).finally(() => {
          resolve(true)
        })
      } else {
        resolve(true)
      }
    })
  })
}

// 返回上级
const back = () => {
  router.back()
}
</script>

<style lang="less">
.msg-send-nav {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 16px;
  height: 151px;
  background: #0027e9 url('@/assets/background.png');
  background-size: cover;
  color: #fff;

  > div:nth-child(1),
  > div:nth-child(2),
  > div:nth-child(3) {
    flex: 1;
  }

  .button-wrapper-left {
    width: 109px;
    img {
      width: 17.63px;
      height: 16.67px;
    }
  }

  .button-wrapper-right {
    width: 109px;
    text-align: right;
    img {
      width: 23.08px;
      height: 23.08px;
    }
  }

  .title {
    font-size: 19.23px;
    text-align: center;
  }
}
</style>
